<template>
  <view class="detail-container">
    <!-- 客户信息 -->
    <ve-card title="客户信息" type="none" fold>
      <ve-cell-val label="客户类型" :value="orderInfo.memberTypeName" />
      <ve-cell-val label="联系电话" :value="orderInfo.memberPhone" />
      <ve-cell label="承租人">
        <view>
          {{ orderInfo.memberName || '-' }}
          <text
            class="member-name-tag"
            v-if="orderInfo.memberType == 2 && (memberInfoDto?.memberStatus == 1 || memberInfoDto?.memberLabelName)"
            :class="[
              memberInfoDto?.memberStatus == 1 || memberInfoDto?.memberLabel == 3
                ? 'danger'
                : memberInfoDto?.memberLabel == 2
                ? 'success'
                : 'primary',
            ]"
          >
            {{ memberInfoDto?.memberStatus == 1 ? '已拉黑' : memberInfoDto?.memberLabelName }}
          </text>
          <view>
            <text
              class="update mr"
              @click="uploadDriverLicenseFn"
              v-if="memberInfoDto && (!memberInfoDto.driverFrontFileId || !memberInfoDto.driverReverseFileId)"
              >未上传证件</text
            >
            <text
              class="update"
              @click="uploadIdCardFn"
              v-if="
                memberInfoDto && (!memberInfoDto.idCardFrontFileId || (memberInfoDto.cardType == 0 && !memberInfoDto.idCardReverseFileId))
              "
              >未上传身份证明</text
            >
          </view>
        </view>
      </ve-cell>
      <ve-cell-val label="证件类型" :value="memberInfoDto.cardTypeName" />
      <ve-cell-val label="证件号" :value="memberInfoDto.cardNumber" />
      <ve-cell-val label="证件住址" :value="memberInfoDto.cardAddress" />
      <ve-cell-val label="紧急联系人" :value="memberInfoDto.emergencyContactName" />
      <ve-cell-val label="紧急联系人手机号" :value="memberInfoDto.emergencyContactPhone" />
    </ve-card>
    <!-- 租赁信息 -->
    <ve-card title="租赁信息" type="none" fold>
      <template #status>
        <view class="card__status">{{ orderInfo.statusName }}</view>
      </template>
      <ve-cell-val label="自营订单号" :value="orderInfo.orderNo" />
      <ve-cell-val label="订单来源" :value="orderInfo.orderSourceName" />
      <ve-cell label="订单获取方式">{{ orderInfo.orderAcquisitionTypeName || '-' }}</ve-cell>
      <ve-cell label="预计租赁周期">{{ (orderInfo.expectedUseCarTime || '-') + ' - ' + (orderInfo.expectedReturnCarTime || '-') }}</ve-cell>
      <ve-cell-val label="预计租期" :value="orderInfo.leaseNumberStr" />
      <ve-cell-val label="实际租期" :value="orderInfo.activeLeaseNumberStr" />
      <ve-cell-val label="下单车型" :value="orderInfo.originalModelName" />
      <ve-cell-val label="取车门店" :value="orderInfo.siteName" />
      <ve-cell-val label="上门取车地址" :value="orderInfo.address" />
      <ve-cell-val label="还车门店" :value="orderInfo.returnSiteName" />
      <ve-cell-val label="上门还车地址" :value="orderInfo.returnAddress" />
      <ve-cell-val label="车辆来源" :value="orderInfo.carSourceName" />
      <ve-cell label="车牌号">
        <text
          >{{ orderInfo.licenseNo || '-' }} <ve-tag color="red" v-if="orderInfo.orderCarLabel" :title="orderInfo.orderCarLabel" />
        </text>
      </ve-cell>
      <ve-cell-val label="交车车型" :value="orderInfo.modelName" />
      <ve-cell label="实际租赁周期">
        {{ orderInfo.realUseCarTime && orderInfo.realReturnCarTime ? orderInfo.realUseCarTime + ' - ' + orderInfo.realReturnCarTime : '-' }}
      </ve-cell>
      <!-- 取消状态 -->
      <ve-cell-val label="取消时间" v-if="orderInfo.status == -100" :value="orderInfo.cancelTime" />
      <ve-cell-val label="超时时长" :value="orderInfo.timeoutDuration" />
      <ve-cell-val label="订单备注" :value="orderInfo.remark" />
      <ve-cell label="创建时间及创建人">
        <view>
          {{ orderInfo.createTime || '-' }}
          <view>{{ orderInfo.createUserName || '-' }}</view>
        </view>
      </ve-cell>
    </ve-card>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { getOrdrDetailsAPI } from '@/api/order/lOrder'
  import { serializeUrlParams } from '@/utils'
  import { onLoad, onUnload } from '@dcloudio/uni-app'

  const props = defineProps({
    orderId: {
      type: String || Number,
    },
  })

  const memberInfoDto = ref({})
  const orderInfo = ref({})
  const getDetail = async () => {
    const id = props.orderId
    const res = await getOrdrDetailsAPI({ id: id })
    if (res.code == 200) {
      const result = res.result
      memberInfoDto.value = result.memberInfoDto
      orderInfo.value = result.orderInfo
    }
  }
  // 上传驾驶证点击
  const uploadDriverLicenseFn = () => {
    let url = '/pages/order/upload-driver-license?'
    let urlParams = {
      memberId: memberInfoDto.value.id,
      driverFrontFileId: memberInfoDto.value.driverFrontFileId,
      driverReverseFileId: memberInfoDto.value.driverReverseFileId,
      autoUpload: true,
    }
    url += serializeUrlParams(urlParams)
    uni.navigateTo({ url: url })
  }
  // 上传身份证明点击
  const uploadIdCardFn = () => {
    let url = '/pages/order/upload-id-card?'
    let urlParams = {
      memberId: memberInfoDto.value.id,
      cardType: memberInfoDto.value.cardType,
      idCardFrontFileId: memberInfoDto.value.idCardFrontFileId,
      idCardReverseFileId: memberInfoDto.value.idCardReverseFileId,
      autoUpload: true,
    }
    url += serializeUrlParams(urlParams)
    uni.navigateTo({ url: url })
  }
  onMounted(() => {
    getDetail()
  })
  onLoad(() => {
    // 车型选择完成
    uni.$on('uploadDriverLicenseOk', (option) => {
      const { driverFrontFileId, driverReverseFileId } = option
      // 更新驾驶证正反面 id
      memberInfoDto.value.driverFrontFileId = driverFrontFileId
      memberInfoDto.value.driverReverseFileId = driverReverseFileId
    })
    uni.$on('uploadIdCardOk', (option) => {
      const { idCardFrontFileId, idCardReverseFileId, cardType } = option
      // 更新身份证明正反面 id
      memberInfoDto.value.idCardFrontFileId = idCardFrontFileId
      memberInfoDto.value.idCardReverseFileId = idCardReverseFileId
      // 更新证件类型
      memberInfoDto.value.cardType = cardType
      memberInfoDto.value.cardTypeName = cardType == 0 ? '身份证' : '护照'
    })
  })
  onUnload(() => {
    uni.$off('uploadDriverLicenseOk')
    uni.$off('uploadIdCardOk')
  })
</script>

<style lang="scss" scoped>
  .detail-container {
    padding: 24rpx;
  }
  .contract-item {
    padding: 10rpx 0;
  }
  .card__status {
    height: 36rpx;
    line-height: 36rpx;
    margin-left: 16rpx;
    padding: 0 16rpx;
    background: linear-gradient(58deg, #ff5b60 0%, #ff7a66 100%);
    border-radius: 50rpx;
    // 字
    text-align: center;
    font-size: 24rpx;
    font-weight: 400;
    color: #ffffff;
  }
  .update {
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    opacity: 1;
    border: 2rpx solid #3072f6;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #3072f6;
    line-height: 44rpx;
    height: 44rpx;
    padding: 5rpx 16rpx;
    word-break: keep-all;
  }
  .mr {
    margin-right: 16rpx;
  }
  .footerback {
    position: fixed;
    z-index: 999;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 24rpx;
  }
  .member-name-tag {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    background: #ffece8;
    border-radius: 16rpx;
    margin-right: 16rpx;
    opacity: 1;
    font-weight: 500;
    text-align: center;
    padding: 0 16rpx;
    flex-shrink: 0;
    white-space: nowrap;
    &.danger {
      background: #ffece8;
      color: #f53f3fff;
    }
    &.success {
      background: #e8ffea;
      color: #00b42aff;
    }
    &.primary {
      background: #e8f7ff;
      color: #3491fa;
    }
  }
</style>
